<template>
  <div class="login">
    <div class="loginBox">
      <div class="main">
        <h5>慢病管理平台</h5>
        <h6>Chronic Disease Management Platform</h6>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="0px"
          class="login_form"
        >
          <!-- 用户名 -->
          <el-form-item prop="UserNo" class="username">
            <el-input
              v-model="loginForm.UserNo"
              prefix-icon="iconfont icon-user"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="Pass" class="password">
            <el-input
              v-model="loginForm.Pass"
              prefix-icon="iconfont icon-3702mima"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="Pass"
            class="password"
            style="text-align: center; vertical-align: middle"
          >
            <el-input
              v-model="loginForm.Yzm"
              placeholder="请输入验证码"
              prefix-icon="iconfont icon-3702mima"
              style="width: 35%; display: inline-block; vertical-align: middle"
            ></el-input>
            <div
              style="
                display: inline-block;
                width: 15%;
                vertical-align: middle;
                line-height: 10px;
              "
              @click="refreshCode"
            >
              <dentify :identifyCode="identifyCode"></dentify>
            </div>
          </el-form-item>
          <!-- 机构 -->
          <!-- <el-form-item prop="HospitalId" class='HospitalId'>
            <el-select v-model="loginForm.HospitalId" placeholder="请选择">
              <el-option v-for="(item,index) in JGList" :key="index" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">代码:{{ item.code }}</span>
              </el-option>
            </el-select>
          </el-form-item> -->
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import dentify from "@/components/yzm.vue";
export default {
  components: {
    dentify,
  },
  data() {
    return {
      loginForm: {
        UserNo: "",
        Pass: "",
        HospitalId: "",
      },
      loginFormRules: {
        // UserNo: [
        //   { required: true, message: "请输入用户名", trigger: "blur" },
        //   { min: 1, max: 55, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        // Pass: [
        //   { required: true, message: "请输入密码", trigger: "blur" },
        //   { min: 1, max: 15, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        // HospitalId: [
        //   { required: true, message: "请选择机构", trigger: "change" }
        // ],
      },
      JGList: [],
      // 表单提交内容
      formLogin: {
        code: "", //验证码输入框
      },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz", //随机串内容,从这里随机抽几个显示验证码
      identifyCode: "", //验证码图片内容
    };
  },
  created() {
    //获取机构
    // this.getJGList()
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    //参数：（1）随机串内容。（2）验证码显示位数
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    //获取机构
    // async getJGList() {
    //   const res = await this.$api.loginJG()
    //   this.JGList = res.data
    // },
    login() {
      // this.$refs.loginFormRef.validate(async valid => {
      //   if (!valid) return
      //   const res = await this.$api.login(this.loginForm)
      //   if (res.code != 1) return this.$message.error(res.message)
      //   this.$message.success('登录成功')
      //   window.sessionStorage.setItem('Token', res.data.Token)
      //   window.sessionStorage.setItem('loginInfo', JSON.stringify(res.data))
      if (this.loginForm.UserNo == "admin" && this.loginForm.Pass == "admin") {
        window.localStorage.setItem("No_token", true);
        this.$router.push("/home");
      } else {
        this.$message.error("账号或密码错误！");
      }
      // })
    },
    // 重置验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //获取验证码的值
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        //通过循环获取字符串内随机几位
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    //随机数字：用于当角标拿字符串的值
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    submit() {
      console.log("验证码:", this.identifyCode);
      console.log("用户输入的验证码:", this.formLogin.code);
      console.log("是否验证通过:", this.identifyCode == this.formLogin.code);
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  .form-control {
    height: 42px !important;
    font-size: 16px !important;
  }
  .loginBox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../../src/assets/loginBg.jpg) no-repeat center;
    background-size: 100%;
  }

  .loginBox .main {
    width: 700px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -225px 0 0 -350px;
    border-radius: 5px;
    background: -webkit-linear-gradient(
      rgba(117, 179, 218, 0.9),
      rgba(24, 113, 171, 0.8)
    );
    background: -o-linear-gradient(
      rgba(117, 179, 218, 0.9),
      rgba(24, 113, 171, 0.8)
    );
    background: -moz-linear-gradient(
      rgba(117, 179, 218, 0.9),
      rgba(24, 113, 171, 0.8)
    );
    background: linear-gradient(
      rgba(117, 179, 218, 0.9),
      rgba(24, 113, 171, 0.8)
    );
  }

  .loginBox h5 {
    color: #fff;
    font-size: 28px;
    text-align: center;
    line-height: 50px;
    padding-top: 22px;
    position: relative;
  }

  .loginBox h5:before {
    content: "";
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    position: absolute;
    left: 98px;
    top: 46px;
  }

  .loginBox h5:after {
    content: "";
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    position: absolute;
    right: 98px;
    top: 46px;
  }

  .loginBox h6 {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-bottom: 55px;
  }
}
.el-input {
  width: 50%;
  margin: 0 auto;
  display: block;
}
.el-select {
  width: 50%;
  margin: 0 auto;
  display: block;
}
.el-select-dropdown {
  min-width: 350px !important;
}
.el-button {
  display: block;
  width: 350px;
  margin: 0 auto;
}

.el-form-item__error {
  top: 10px;
  left: 540px;
}
</style>
